<template>
  <div>
    <div style="margin: 10px 0">
      <el-row style="display: flex;justify-content: space-between">
        <el-col :span="24">
          <el-card class="box-card">
            <h1>{{detail.name}}</h1>
            <div>
              <el-button type="success" v-if="detail.status==='正常'" @click="handleEdit(detail)">纠 错</el-button>
              <el-button type="error" v-if="detail.status==='待审核'">待 审 核</el-button>

              <el-button type="success" @click="collect" v-if="!detail.isCollect">收 藏</el-button>

              <el-button type="success" @click="del(detail.collectId)" v-if="detail.isCollect">取消收藏 </el-button>
            </div>
            词条内容：
            <div v-html="detail.content" class="content"></div>

          </el-card>
        </el-col>
      </el-row>

      <div class="main-content">
        <el-divider></el-divider>
        <div style="width: 1000px; margin: 0 auto">
          <div style="margin: 20px 0">

            <div style="margin: 10px 0">
              <el-input type="textarea" placeholder="请输入评论" v-model="comment.content" rows="10"></el-input>
              <div style="text-align: right; margin: 10px 0">
                <el-button type="primary" @click="submit">提交</el-button>
              </div>
            </div>
          </div>

          <div style="margin: 20px 0">
            <div
                style="margin: 10px 0; font-size: 24px; padding: 10px 0; border-bottom: 1px solid #ccc; text-align: left">
              评论列表
            </div>

            <div style="margin: 20px 0;  text-align: left;">
              <div style="padding: 10px 0; " v-for="item in comments" :key="item.id">
                <div style="display: flex">
                  <div style="width: 80px">
                    <el-avatar :size="50"
                               :src="item.img"></el-avatar>
                    <!--                <el-avatar :size="50"-->
                    <!--                           :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>-->
                  </div>
                  <div style="flex: 1">
                    <div>{{ item.username }} <span style="margin-left: 10px">{{ item.time }}</span>
                    </div>
                    <div style="margin-top: 10px; color: #666">{{ item.content }}</div>
                    <div>
                      <el-button type="text" @click="reply(item.id, item.username)">回复</el-button>
                    </div>

                    <!-- 回复列表 -->
                    <div v-if="item.children.length"
                         style="margin-left: 100px; background-color: aliceblue; padding: 10px; border-radius: 10px">
                      <div v-for="sub in item.children" :key="sub.id">
                        <div style="padding:5px 0"><b style="cursor: pointer"
                                                      @click="reply(sub.pid, sub.username)">{{
                            sub.username
                          }}</b> <span>回复 <span style="color: cornflowerblue">@{{
                            sub.target
                          }}</span>
                    <span style="color: #666; margin-left: 10px">{{ sub.content }}</span></span>
                          <span style="float: right; font-size: 13px; color: #666; margin-top: 3px">{{
                              sub.time
                            }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <el-dialog title="回复" :visible.sync="dialogFormVisible" width="40%">
            <el-form :model="replyComment">
              <el-form-item label="内容" :label-width="100">
                <el-input v-model="replyComment.content" autocomplete="off" style="width: 80%"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveReply">确 定</el-button>
            </div>
          </el-dialog>

        </div>

        <el-divider></el-divider>

        <el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
          <el-form label-width="120px" size="small" style="width: 80%; margin: 0 auto">


            <el-form-item label="纠错内容">
              <el-input type="textarea" rows="10" v-model="form.editContent" autocomplete="off"></el-input>
            </el-form-item>


          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </div>
        </el-dialog>


      </div>


    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      form:{},
      moviesList:[],
      detail: {},
      value: 0,
      comments: [],
      comment: {
        rate: 0,
        content: ''
      },
      replyComment: {},
      dialogFormVisible: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      foreignId:-1
    }
  },
  created() {
    this.foreignId=this.$route.query.id
    this.load()
    this.loadComment()

  },
  methods: {
    save() {
      this.form.status="待审核"
      this.form.editName=this.user.username
      this.request.post("/baike", this.form).then(res => {
        if (res.code === '200') {
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible = true
      this.$nextTick(() => {
        if(this.$refs.img) {
          this.$refs.img.clearFiles();
        }
        if(this.$refs.file) {
          this.$refs.file.clearFiles();
        }
      })
    },
    del(id) {
      this.request.delete("/collect/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("操作成功")
          this.load(this.$route.query.id)
        } else {
          this.$message.error("操作失败")
        }
      })
    },
    collect(){
      this.request.post("/collect",{
        userId:this.user.id,
        dataId:this.detail.id,
        name:this.detail.name,
        // img:this.detail.img,
      }).then(res => {
        console.log(res.data)
        this.load(this.$route.query.id)
      })
    },
    load(){
      this.request.get("/baike/"+this.$route.query.id).then(res => {
        console.log(res.data)
        this.detail = res.data
      })
    },

    reply(pid, target) {
      this.replyComment = {
        pid: pid,
        userId: this.user.id,
        username: this.user.username,
        foreignId:this.foreignId,
        img:this.user.avatarUrl,
        // foreignId: this.detail.id,
        target: target
      }
      this.dialogFormVisible = true
    },
    loadComment() {
      this.request.get('/comment/list?foreignId='+this.foreignId).then(res => {
        console.log(res)
        if (res.code === '200') {
          this.value = res.data.rate
          this.comments = res.data.comments
        }
      })
    },
    saveReply() {
      this.request.post('/comment', this.replyComment).then(res => {
        this.comment = {}

        this.$notify.success('成功')
        this.replyComment = {}
        this.dialogFormVisible = false
        this.loadComment()
      })

    },
    submit() {
      this.comment.userId = this.user.id
      this.comment.username = this.user.username
      this.comment.foreignId = this.foreignId
      this.comment.img = this.user.avatarUrl

      this.request.post('/comment', this.comment).then(res => {
        console.log(res)

        this.comment = {}
        this.$notify.success('成功')
        this.loadComment()

      })

    }
  }
}
</script>
<style>
.content img{
  max-width: 100%!important;
}
</style>
<style scoped>

img {
  max-width: 100%;
}
h1 {
  text-align: center;
}

.ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}
</style>









